<script setup>
import ItemCase from "@/components/ItemCase.vue";

defineProps({enter: Boolean})
const titles = ['企业家IP孵化', '新媒体代运营', '线下活动拍摄', '企业活动策划']
</script>

<template>
  <view class="container">
    <view class="column" v-if="enter">
      <view class="column intro">
        <view class="bottomIn d1s">
          <view class="font150 inter" style="color: #ffffff29;">03</view>
          <view class="column main">
            <view class="font56">新媒体运营及活动策划</view>
            <view class="font28" style="color: #ffffff80;">New Media Operations and Event Planning</view>
            <view class="row line">
              <view class="progress"/>
            </view>
            <view class="sub-title font24 top12">精准创意内容创作与互动，助力品牌全方位传播</view>
          </view>
        </view>
        <ItemCase class="item-case" fw="100%" width="25%" icon="icon_media" :titles="titles" iw="30%"/>
      </view>
      <img class="image fadeIn d4s"
           src="https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_service3_pic.png" alt="">
      <view class="intro-card"/>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1278 / 1920));

  .intro {
    width: 42%;
    top: 0;
    right: 0;
    z-index: 2;
    margin-left: auto;
    justify-content: flex-end;

    .main {
      margin-left: 7%;
      margin-top: -12%;

      .line {
        width: 30%;
        height: 2px;
        background-color: white;
        margin-top: 3%;

        .progress {
          width: 40%;
          height: 4px;
          background-color: #04c0df;
        }
      }
    }

    .item-case {
      width: 96%;
    }
  }

  .image {
    right: 0;
    margin-top: -14em;
    height: calc(100vw * (676 / 1920));
    z-index: 1;
    margin-left: auto;
  }

  .intro-card {
    position: absolute;
    width: 83.33%;
    margin-top: 26em;
    height: calc(100vw * (588 / 1920));
    background: linear-gradient(45deg, #383D3E 0%, #191919 100%);
  }
}
</style>